/**
 * @author jouyang
 */
var QS_NavigationChart = function(container,options){
	this.container = container;
	this.canvas = null;
	this.ctx = null;
	this.canvasSize = {width:0,height:0};  
	this.options = {
		lineColor:"#666666",
		titleColor:"#6c6c6c",
		bodyColor:"fefefe",
		backgroundColor:"#f9f9f9",
		titleHeight:8,
		rate: {width:1,height:1},
		magin:2
	};
	$.extend(true,this.options,options);
	this.init();
};
QS_NavigationChart.prototype = {
	init:function(){
		this.canvasSize.width = this.container.width();
		this.canvasSize.height = this.container.height();
	},
	_createCanvas: function(){
        if(this.ctx == null && this.canvas != null) {
            this._clearCanvas();
        }
        var bIsIE = $.browser.msie;
        if(bIsIE) { 
            window.G_vmlCanvasManager.init_(document); // make sure everything is setup  
        }
        this.canvas = document.createElement("canvas");
        this.canvas.width =  this.canvasSize.width;
        this.canvas.height = this.canvasSize.height;
        this.canvas.style["float"] = "left";
        this.container.append(this.canvas); 
        if (bIsIE) { // excanvas 
            this.canvas = window.G_vmlCanvasManager.initElement(this.canvas); 
        }
        this.ctx = this.canvas.getContext("2d"); 
        this.ctx.translate(this.options.magin,this.options.magin);  
    },
	_clearCanvas:function(){
		
	},
	draw:function(wsId){
		if(!wsWidgets||!wsWidgets[wsId])return false;
		var data = [],ws = wsWidgets[wsId],profile,ratex = this.options.rate.width, ratey = this.options.rate.height;
		for(var i=0;i<ws.length;i++){
			profile = ws[i].profile;
			data.push({type:profile.type,index:profile.layerIndex,size:{x:profile.x*ratex,y:profile.y*ratey,w:profile.w*ratex,h:profile.h*ratey}});
		}
		data.sort(function(a,b){
			return a.index>b.index;
		});
		this._draw(data);
	},
	_draw:function(data){ //the structure of data:[{type:0,size:{x:10,y:20,w:100,h:200}}]
	    if(this.canvas == null)this._createCanvas();
	    if(this.ctx==null) return false;
		this.ctx.save();
		this.ctx.clearRect(0,0,this.canvasSize.width,this.canvasSize.height);  // clear the drawing.
        this.ctx.fillStyle = mstar.flotUtil.colorToRGB(this.options.backgroundColor);
        this.ctx.fillRect(0, 0, this.canvasSize.width,this.canvasSize.height);  // draw background.
		this.ctx.restore();
		if(!data||!data.length)return false;
		this.ctx.lineWidth = 0.5;
        this.ctx.strokeStyle = this.options.lineColor;
		var size, th = this.options.titleHeight;
		this.ctx.save();
		for(var i=0;i<data.length;i++){                      // draw widgets.
			this.ctx.beginPath();
			size = data[i].size;
			this.ctx.moveTo(size.x,size.y);
			this.ctx.lineTo(size.w+size.x,size.y);
			this.ctx.lineTo(size.w+size.x,size.y+size.h);
			this.ctx.lineTo(size.x,size.y+size.h);
			this.ctx.lineTo(size.x,size.y);
			this.ctx.moveTo(size.x,size.y+th);
			this.ctx.lineTo(size.x+size.w,size.y+th);
			this.ctx.stroke();
			this.ctx.fillStyle = mstar.flotUtil.colorToRGB(this.options.titleColor,0.6);
			this.ctx.fillRect(size.x, size.y, size.w,th);
			this.ctx.fillStyle = mstar.flotUtil.colorToRGB(this.options.bodyColor,0.7);
			this.ctx.fillRect(size.x,size.y+th,size.w,size.h-th);
		}
		this.ctx.restore();
	}
};

